<!--  -->
<template>
  <div class="container">
    <navbar
      class="de-navbar"
      :vaniconL="true"
      :noRight="true"
      :noLeft="false"
      :vaniconR="true"
      iconNameL="arrow-left"
      iconNameR="setting-o"
      @clickLeft="goBack"
      >医生列表</navbar
    >
    <div style="height: 0.45rem"></div>
    <div class="d-list">
      <div class="list-box" v-for="(item, index) in todoList" :key="index">
        <div class="head">
          <van-image
            round
            width="0.7rem"
            height="0.7rem"
            :src="item.headImage"
          />
          <div class="right">
            <div class="up">
              <span>{{ item.realName }}</span>
              <span>{{ item.post }}</span>
              <span>{{ item.departmentName }}</span>
            </div>
            <div class="center">
              <el-rate
                :value="Number(item.score)"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
                >></el-rate
              >
            </div>
            <div class="down">
              <span>{{ item.hospitalName }}</span>
              <span>{{ item.hospitalLevel }}</span>
            </div>
          </div>
        </div>
        <p class="work">
          {{ item.skilled }}
        </p>
        <div class="bottom">
          <van-button
            @click="toApply(item)"
            round
            plain
            type="primary"
            size="small"
            >申请阅片</van-button
          ><van-button
            @click="toDdetail(item)"
            plain
            round
            type="info"
            color="#4775d9"
            size="small"
            >医生详情</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navbar from "@/components/navbar";
import { Collapse, CollapseItem } from "vant";
import { loadDoctor } from "@/api/doctor";
import { Toast, Dialog } from "vant";
export default {
  name: "doctorList",
  data() {
    return {
      activeNames: ["0"],
      doctorLists: null,
      usItems: "",
    };
  },

  components: { navbar },

  computed: {
    todoList: function () {
      return (
        this.doctorLists &&
        this.doctorLists.filter(function (item) {
          return item.status;
        })
      );
    },
  },

  created() {
    // console.log(this.$route);
    this.usItems = this.$route.params.usItems || "";
    this.loadList();
    Toast.setDefaultOptions({ duration: 500 });
    Toast.loading({
      message: "加载中...",
      forbidClick: true,
      overlay: true,
    });
  },
  mounted() {},

  methods: {
    // 加载医生
    loadList() {
      let data = {
        dsid: this.usItems.dsId,
      };
      loadDoctor(data).then((res) => {
        // console.log(res);
        if (res.status.code == 200) {
          this.doctorLists = res.data.info;
        } else {
          Toast.fail(res.status.msg);
        }
      });
    },
    // 返回上一页
    goBack() {
      this.$router.replace({ path: "/detailList" });
    },
    // 医生详情
    toDdetail(item) {
      // console.log(item);
      let items = JSON.stringify(item);
      this.$router.push({
        name: "doctorDetail",
        params: {
          detail: items,
        },
      });
    },
    // 医生详情
    toApply(item) {
      this.$router.push({
        name: "applyRead",
        params: {
          items: item,
          usitems: this.usItems,
        },
      });
    },
  },
};
</script>
<style lang='scss' scoped>
@import "../../assets/css/utils";
.container {
  position: relative;
  height: 100%;
  background: #f5f5f5;
  & .d-list {
    width: 95%;
    height: 100%;
    margin: auto;
    padding-bottom: 0.1rem;
    & .list-box {
      position: relative;
      border-radius: 0.1rem;
      background: #fff;
      margin-top: 0.1rem;
      margin-bottom: 0.1rem;
      box-shadow: 4px 4px 10px #cccccc;
      & .head {
        display: flex;
        justify-content: space-around;
        padding-top: 0.2rem;
        & .right {
          width: 70%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          & .up {
            display: flex;
            justify-content: space-between;
            vertical-align: auto;
            & span:nth-of-type(1) {
              font-size: 0.2rem;
            }
            & span:nth-of-type(2) {
              font-size: 0.14rem;
            }
            & span:nth-of-type(3) {
              font-size: 0.14rem;
            }
          }
          & .center {
            text-align: left;
            margin: 0.05rem 0;
          }
          & .down {
            display: flex;
            justify-content: space-between;
            & span:nth-of-type(1) {
              font-size: 0.14rem;
            }
            & span:nth-of-type(2) {
              font-size: 0.14rem;
              color: red;
            }
          }
        }
      }
      & .work {
        text-align: left;
        margin-top: 0.1rem;
        // text-indent: 0.1rem;
        border-top: 1px solid #eaeaea;
        font-size: 0.14rem;
        padding: 0.1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      & .bottom {
        text-align: right;
        padding-right: 0.1rem;
        padding-bottom: 0.1rem;
        & .van-button {
          margin-left: 0.1rem;
        }
      }
    }
  }
}
.tags {
  position: absolute;
  top: 0;
  left: 0;
  border-top-left-radius: 8px !important;
}
</style>